<template>
  <div class="app">
    账号:<input type="text" v-model="account" /> <br /><br />
    密码:<input type="password" v-model="password" /> <br /><br />
    性别: 男:<input type="radio" name="gender" v-model="sex" value="男" />
    <br />
    女:<input type="radio" name="gender" v-model="sex" value="女" /><br />
    爱好:
    <label for=""></label>
    抽烟:<input type="checkbox" v-model="hobby" value="chou" />
    <label for=""></label>
    喝酒:<input type="checkbox" v-model="hobby" value="he" />
    <label for=""></label>
    玩游戏:<input type="checkbox" v-model="hobby" value="wan" />
    <label for=""></label>
    摔手机:<input type="checkbox" v-model="hobby" value="shuai" />
    <br />
    所属地区:
    <select v-model="city">
      <option value="beijing" selected>北京</option>
      <option value="shanghai">上海</option>
      <option value="chengdu">成都</option>
      <option value="jinan">济南</option>
      <option value="chongqing">重庆</option>
      <option value="shenzheng">深圳</option>
    </select>
    <br /><br />
    其他信息:
    <textarea v-model="other"></textarea><br /><br />
    <input type="checkbox" v-model="isAgree" value="" /> 阅读并同意
    <a href="#">《用户协议》</a> <br />
    <input type="submit" value="提交" />
  </div>
</template>

<script lang="ts">
export default {
  name: "Sname",
  data() {
    return {
      account: "",
      password: "",
      sex: "",
      hobby: [],
      city: "",
      other: "",
      isAgree: "",
    };
  },
};
</script>

<style scoped>
.app {
  background-color: #ddd;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>